<template>
<div class="ze">
    <div class="ze-ning">
        
        <!--搜索框:class="{'ning-search': true, 'hidden': isHeaderHidden}"-->
        <Transition name="slide-fade">
            <div class="ning-search" v-if="isHeaderHidden">
                <div class="go-back">
                    <span @click="router.back">❮</span>
                </div>
                <div class="search-type-shop" v-if="selectedTab === '商品'">
                    <img src="/public/images/search.svg" />
                    <span class="close" @click="cleanSearch" v-if="searchText">×</span>
                    <input type="text" ref="searchContent" v-model="searchText" />
                </div>
                <div class="change-list" v-if="selectedTab === '商品'">
                    <img :src="svgList" :alt="svgTag" @click="changeList" />
                </div>
                <div class="search-type-store" v-if="selectedTab === '店铺'">
                    <img src="/public/images/search.svg" />
                    <span class="close" @click="cleanSearch" v-if="searchText">×</span>
                    <input type="text" ref="searchContent" v-model="searchText" />
                </div>
            </div>
        </Transition>

        <!--商品与店铺-->
        <div class="header-point">
            <div class="selectable">
                <strong :class="{'font-color': selectedTab === '商品'}" @click="shopTab('商品')">商品</strong>
                <div :class="{'selected-tab': selectedTab === '商品'}"></div>
            </div>
            <div class="selectable">
                <strong :class="{'font-color': selectedTab === '店铺'}" @click="shopTab('店铺')">店铺</strong>
                <div :class="{'selected-tab': selectedTab === '店铺'}"></div>
            </div>
        </div>

        <!--分割线-->
        <div class="split-line"></div>

        <!--条件筛选-->
        <div class="screen-header" v-if="selectedTab === '商品'">
            <div class="screen-title">
                <div :class=" {'header-nav': true, 'zonghe': true, 'font-color': isSynthe}">综合</div>
                <div :class="{'zonghe-triangle': true, 'zonghe': true, 'font-color': isSynthe}">▼</div>
            </div>

            <div class="screen-title">
                <div :class="{'header-nav': true, 'font-color': isSales}" @click="querySales">销量</div>
            </div>

            <div class="screen-title">
                <div :class="{'header-nav': true, 'font-color': isPrice}" @click="queryPrice">价格</div>
                <div class="header-nav" @click="queryPrice">
                    <div :class="{'price-sort': true, 'font-color': isPriceUp}">▲</div>
                    <div :class="{'price-sort': true, 'font-color': isPriceDown}">▼</div>
                </div>
            </div>

            <div class="screen-title">
                <div :class="{'header-nav': true, 'font-color': isScreen}" @click="openScreen">筛选</div>
                <div :class="{'header-shaixuan': true, 'font-color': isScreen}" @click="openScreen">≡</div>
            </div>
        </div>
    </div>

        <!--商品-->
        <div v-if="selectedTab === '商品'" class="shop-list">
            <div v-if="svgTag === 'list'">
                <ShopRowsList :dataList="dataList" />
            </div>
            <div v-else>
                <ShopColumnList :dataList="dataList" />
            </div>
        </div>
        <!--店铺-->
        <div v-if="selectedTab === '店铺'" class="shop-store">
            <ShopStore />
        </div>

    <!--显示综合排序的下拉框-->
    <div v-if="isBoxVisible" class="comp-full">
        <div class="comp-downlist">
            <li @click="queryShopSort(0)">综合排序</li>
            <li @click="queryShopSort(1)">按评论数从高到低排序</li>
            <li @click="queryShopSort(2)">按销量从高到低排序</li>
            <li @click="queryShopSort(3)">按收藏数从高到低排序</li>
        </div>
    </div>

    <!--阴影部分-->
    <div :class="{'shadow': isShadow}"></div>
</div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import ShopStore from './ShopStore.vue';
import ShopRowsList from './ShopRowsList.vue';
import ShopColumnList from './ShopColumnList.vue';

const route = useRoute();
const router = useRouter();

const searchText = ref(route.query.searchMessage);
const typeId = ref(route.query.typeId);

//阴影
const isShadow = ref(false);
//综合的下拉框
const isBoxVisible = ref(false);

//综合样式
const isSynthe = ref(false);
//销量样式
const isSales = ref(false);
//价格样式
const isPrice = ref(false);
const isPriceUp = ref(false);
const isPriceDown = ref(false);
//筛选样式
const isScreen = ref(false);

const searchContent = ref(null);

//是否隐藏头部，下拉就会隐藏
const isHeaderHidden = ref(true);

const handleScroll = async (event) => {
    const scrollDirection = event.deltaY > 0 ? 'down' : 'up';
    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // console.log(scrollDirection+"="+currentScrollTop);
    // 如果向下滚动并且滚动距离超过100px，隐藏头部
    if (scrollDirection === 'down' && currentScrollTop > 40) {
        isHeaderHidden.value = false;
    } else if (scrollDirection === 'up' && currentScrollTop < 200) {
        isHeaderHidden.value = true;
    }

    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    console.log(scrollDirection, scrollHeight - scrollTop);
    if (scrollHeight - scrollTop <= clientHeight) {
        console.log("QueryShopList真的到底了");
        fetchData();
    }
};

//关闭阴影
const handleGlobalClick = (event) => {
    isShadow.value = false;
    isBoxVisible.value = false;
    if (!isBoxVisible.value && event.target.closest('.zonghe')) {
        isShadow.value = true;
        isBoxVisible.value = true;
        isSynthe.value = true;

        isPrice.value = false;
        isPriceUp.value = false;
        isPriceDown.value = false;
        isSales.value = false;
        isScreen.value = false;
    }
};

//回车搜索
const searchEnter = (event) => {
    if (event.key === "Enter") {
        alert("按了回车键搜索");
    }
}

const searchRequest = () => {
    alert("请求后端");
}

// onMounted 确保组件挂载后获取 productId
onMounted(() => {

    window.addEventListener('click', handleGlobalClick);
    // window.addEventListener('wheel', handleScroll);
    window.addEventListener("keydown", searchEnter);
    window.addEventListener('scroll', handleScroll);

    console.log("分类ID：", typeId);

    //默认搜索
    if (searchText.value) {
        searchRequest();
    }
    // 初始化时加载数据
    fetchData();
});

const dataList = ref([]); // 存储瀑布流数据
const isLoading = ref(false); // 控制加载状态的标志
const hasMore = ref(true); // 是否还有更多数据可以加载

// 模拟从后端加载数据的函数
const fetchData = async () => {
    dataList.value = [
        {
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王','性价比之王','性价比之王'],
            activePrice: 3200.00,
            price: 7200.99,
            evalCount: 1000,
            evalRate: 100,
            id: 1
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王','性价比之王','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 2
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王','性价比之王','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 3
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王','性价比之王','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 4
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王','性价比之王','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 5
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 6
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 7
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 8
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 9
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 10
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 11
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 12
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 13
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 14
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 15
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 16
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 17
        },{
            src: '/src/assets/lunbo/image1.jpeg',
            brandType: '电视',
            brandName: '小米',
            subBrandName: 'S Pro Mini LED',
            title: '120Hz超屏 这里是20个字以内的标题',
            content: '阿西吧',
            createDate: '2024-10-01',
            tags: ['120Hz超屏','性价比之王'],
            activePrice: 3200.00,
            price: 7100.99,
            evalCount: 1000,
            evalRate: 100,
            id: 18
        },
    ];

    if (isLoading.value || !hasMore.value) return;

    isLoading.value = true;

    // 模拟网络请求
    // const newItems = await new Promise(resolve => {
    //     console.log("模拟网络请求后端：", resolve);
    //     setTimeout(() => {
    //         const moreItems = Array.from({ length: 20 }, (_, index) => ({
    //             id: dataList.value.length + index,
    //             content: `内容${dataList.value.length + index}`
    //         }));
    //         resolve(moreItems);
    //     }, 1000);
    // });

    // dataList.value.push(...newItems);
    isLoading.value = false;

    // 假设我们加载了50条数据后没有更多数据了
    if (dataList.value.length >= 50) {
        hasMore.value = false;
    }
};

// 清理搜索输入框的内容
const cleanSearch = () => {
    if (searchContent.value) {
        searchContent.value = '';
        searchText.value = '';
    }
}

// 查询按钮的切换
const svgList = ref('/public/images/shop-list.svg');
const svgTag = ref('list');
const changeList = () => {
    if (svgTag.value == 'list') {
        svgTag.value = 'block';
        svgList.value = '/public/images/shop-block.svg';
    } else if (svgTag.value == 'block') {
        svgTag.value = 'list';
        svgList.value = '/public/images/shop-list.svg';
    }
    //查询数据
    alert("查询数据");
}

// 查询
const selectedTab = ref('商品');
const shopTab = (tabName) => {
    selectedTab.value = tabName;
    console.log("当前选择是：", tabName);
}

//综合排序的选项
const queryShopSort = (sortType) => {
    alert("选择了"+sortType);
}

//销量排序
const querySales = () => {
    isSales.value = true;
    //综合样式
    isSynthe.value = false;
    //价格样式
    isPrice.value = false;
    isPriceUp.value = false;
    isPriceDown.value = false;
    //筛选样式
    isScreen.value = false;
}

//价格排序
const queryPrice = () => {
    //综合
    isSynthe.value = false;
    isScreen.value = false;
    isSales.value = false;

    isPrice.value = true;
    if (!isPriceUp.value) {
        isPriceUp.value = true;
        isPriceDown.value = false;
        return;
    }
    if (!isPriceDown.value) {
        isPriceDown.value = true;
        isPriceUp.value = false;
        return;
    }

}

//筛选页面
const openScreen = () => {
    isScreen.value = true;

    isSynthe.value = false;
    isSales.value = false;

    isPrice.value = false;
    isPriceUp.value = false;
    isPriceDown.value = false;
}

</script>

<style scoped>
.ze {
    width: 100%;
    margin: auto;
    background-color: #ffffff;
}
.ze-ning {
    background-color: #ffffff;
    height: auto;
    width: 100%;
    margin: auto;
    z-index: 100;
    position: fixed;
    top: 0;
}
.ning-search {
    width: 100%;
    margin: auto;
    padding-top: 8px;
    height: 40px;
    opacity: 1; /* 初始状态可见 */
    transform: translateY(0); /* 初始状态位置正常 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* 设置过渡效果 */
}

/*返回上一层*/
.go-back {
    font-size: 20px;
    cursor: pointer;
    width: 10%;
    float: left;
}
.go-back span {
    cursor: pointer;
    margin: auto;
}

/*商品-搜索输入框*/
.search-type-shop {
    float: left;
    width: 75%;
    margin: auto;
}
.search-type-shop input {
    height: 30px;
    width: 95%;
    border-radius: 20px;
    background-color: #d9d9d9;
    border: 0px #d9d9d9;
    margin-top: 0px;
    padding-left: 30px;
}
.search-type-shop img {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
}
.search-type-shop .close {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 83%;
    cursor: pointer;
    border-radius: 50px;
    background-color: #777777;
    margin: auto;
    font-size: 14px;
    padding: auto;
    color: #ffffff;
    margin-top: 6px;
}

/*店铺-搜索输入框*/
.search-type-store {
    float: left;
    width: 80%;
}
.search-type-store input {
    height: 30px;
    width: 100%;
    border-radius: 20px;
    background-color: #d9d9d9;
    border: 0px #d9d9d9;
    margin-top: 0px;
    padding-left: 30px;
}
.search-type-store img {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
}
.search-type-store .close {
    width: 18px;
    height: 18px;
    position: absolute;
    left: 92%;
    cursor: pointer;
    border-radius: 50px;
    background-color: #777777;
    margin: auto;
    font-size: 14px;
    padding: auto;
    color: #ffffff;
    margin-top: 6px;
}

/*分割线*/
.split-line {
    border: 1px solid #cccccc;
    width: 100%;
    margin: auto;
    margin-top: 39px;
    position: fixed;
}
/*商品与店铺的选项卡*/
.header-point {
    width: 100%;
    margin-top: 0px;
    position: fixed;
    background: #fff;
}

/*切换查询内容列表按钮*/
.change-list {
    float: right;
    margin: auto;
    margin-top: 3px;
    margin-right: 0px;
    width: 10%;
}
.change-list img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

/*商品内容列表*/
.shop-tab {
    width: 100%;
    margin: auto;
    z-index: 100;
}
.selectable {
    width: 50%;
    float: left;
    height: 35px;
    margin-top: 2px;
    padding-top: 3px;
}
.selected-tab {
    border: 1.8px solid #6d9eeb;
    width: 30px;
    margin: auto;
    margin-top: 3px;
    padding-bottom: 0px;
    border-radius: 50px;
}
.font-color {
    color: #6d9eeb;
}
/*筛选*/
.screen-header {
    width: 100%;
    height: 40px;
    margin: auto;
    position: fixed;
    margin-top: 40px;
    background-color: #ffffff;
}
.screen-title {
    padding-top: 10px;
    width: 20%;
    height: 30px;
    font-size: 14px;
    float: left;
    padding-left: 5%;
}
.zonghe-triangle {
    float: left;
    font-size: 8px;
    margin-left: 5px;
    margin-top: 3px;
    cursor: pointer;
}
.header-nav {
    float: left;
    margin: auto;
    cursor: pointer;
}
.header-shaixuan {
    float: left;
    margin: auto;
    cursor: pointer;
    margin-left: 5px;
}
.price-sort {
    font-size: 8px;
    width: 10px;
    height: 5px;
    margin-bottom: 3px;
    cursor: pointer;
    margin-left: 5px;
}

/*隐藏*/
.slide-fade-enter-active {
    transition: all 0.5s ease-out;
}

.slide-fade-leave-active {
    transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateY(-30px);
    opacity: 0;
}

/*弹出的综合选择下拉框*/
.comp-full {
    width: 100%;
    margin: auto;
    text-align: left;
    border-radius: 0 0 10px 10px;
    background-color: white;
    top: 125px;
    position: fixed;
    z-index: 1000;
}
.comp-downlist li {
    list-style: none;
    color: #666666;
    line-height: 30px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}
/*阴影*/
.shadow {
    position: fixed;
    top: 130px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1); /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/*商品列表*/
.shop-list {
    width: 95%;
    margin: auto;
    margin-top: 128px;
    background-color: #ffffff;
}

/*店铺*/
.shop-store {
    top: 0;
    margin: auto;
    width: 100%;
    background-color: #d9d9d9;
    margin-top: 88px;
}
</style>